<template>
  <div>
    <navbar title="animate.css" class="wow animate__bounce"></navbar>
    <div class="container">
      <div
        :class="item.class"
        :style="'background:' + randomColor() + ';' + 'color:' + randomColor()"
        v-for="(item, index) in testArr"
        :key="index"
        data-wow-offset="100"
      >
        {{ index + 1 }}
      </div>
      <!-- data-wow-duration（动画持续时间)
      data-wow-delay（动画延迟时间）
      data-wow-offset（元素的位置露出后距离底部多少像素执行）
      data-wow-iteration（动画执行次数） -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testArr: [
        { class: "box-item wow animate__backInDown" },
        { class: "box-item wow animate__backInDown" },
        { class: "box-item wow animate__backInLeft" },
        { class: "box-item wow animate__backInRight" },
        { class: "box-item wow animate__backInLeft" },
        { class: "box-item wow animate__backInRight" },
        { class: "box-item wow animate__backInLeft" },
        { class: "box-item wow animate__backInRight" },
        { class: "box-item wow animate__backInLeft" },
        { class: "box-item wow animate__backInRight" },
        { class: "box-item wow animate__bounceInLeft" },
        { class: "box-item wow animate__bounceInRight" },
        { class: "box-item wow animate__fadeInTopLeft" },
        { class: "box-item wow animate__fadeInTopRight" },
        { class: "box-item wow animate__rotateInDownLeft" },
        { class: "box-item wow animate__rotateInDownRight" },
      ],
    };
  },
  mounted() {
    new this.$wow.WOW().init();
    const stylebg = this.randomColor();
    console.log(stylebg);
  },
  methods: {
    randomColor() {
      const color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
      return color;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .box-item {
    // width: 45%;
    height: 600px;
    line-height: 600px;
    text-align: center;
    font-size: 200px;
    font-weight: 700;
    margin: 20px;
    background: rgb(22, 190, 202);
  }
}
</style>
